@import '../../../style/theme/index';

@mi-tooltip: ~'@{mi-prefix}tooltip';
.@{mi-tooltip} {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;

    > [class*="mi-tooltip-"] {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 14px;
        position: absolute;
        transition: all .1s ease;
        z-index: 19900407;
    }

    &-content {
        margin: 0;
        padding: 0;
        box-shadow: 0 0 6px fade(#000, 30%);
    }

    &-arrow {
        position: absolute;
        .properties(width, 12);
        .properties(height, 12);
        display: block;
        background: transparent;
        overflow: hidden;
        pointer-events: none;

        &-inner {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: block;
            .properties(width, 11);
            .properties(height, 11);
            margin: auto;
            background: fade(#000, 75%);
            box-shadow: 0 0 4px fade(#000, 15%);
            content: '';
            pointer-events: auto;
            transform: translateY(-9px) rotate(45deg);
        }
    }

    &-inner {
        .properties(min-width, 30);
        padding: 6px 12px;
        .properties(font-size, 12);
        text-align: left;
        .letter-spacing();
        color: #fff;
        text-decoration: none;
        .properties(line-height, 22);
        word-wrap: break-word;
        background: fade(#000, 75%);
        .border-radius();
    }

    &-top &-arrow,
    &-top-left &-arrow,
    &-topLeft &-arrow,
    &-topRight &-arrow,
    &-top-right &-arrow {
        transform: translateX(-50%);
        .properties(bottom, -12);
    }

    &-top &-arrow {
        left: 50%;
    }

    &-top-left &-arrow,
    &-topLeft &-arrow {
        .properties(left, 16);
    }

    &-top-right &-arrow,
    &-topRight &-arrow {
        .properties(right);
    }

    &-left &-arrow,
    &-leftTop &-arrow,
    &-left-top &-arrow,
    &-leftBottom &-arrow,
    &-left-bottom &-arrow {
        .properties(right, -18);
        transform: translateX(-50%);

        &-inner {
            transform: translateX(-9px) rotate(45deg);
        }
    }

    &-left &-arrow {
        transform: translateY(-50%);
        top: 50%;
        .properties(right, -12);
    }

    &-left-top &-arrow,
    &-leftTop &-arrow {
        .properties(top);
    }

    &-left-bottom &-arrow,
    &-leftBottom &-arrow {
        .properties(bottom);
    }

    &-bottom &-arrow,
    &-bottomLeft &-arrow,
    &-bottom-left &-arrow,
    &-bottomRight &-arrow,
    &-bottom-right &-arrow {
        transform: translateX(-50%);
        .properties(top, -12);

        &-inner {
            transform: translateY(9px) rotate(45deg);
        }
    }

    &-bottom &-arrow {
        left: 50%;
    }

    &-bottomLeft &-arrow,
    &-bottom-left &-arrow {
        .properties(left, 16);
    }

    &-bottomRight &-arrow,
    &-bottom-right &-arrow {
        .properties(right, 16);
    }

    &-right &-arrow,
    &-rightTop &-arrow,
    &-right-top &-arrow,
    &-rightBottom &-arrow,
    &-right-bottom &-arrow {
        .properties(left, -12);
        transform: translateY(-50%);

        &-inner {
            transform: translateX(9px) rotate(45deg);
        }
    }

    &-right &-arrow {
        top: 50%;
    }

    &-rightTop &-arrow,
    &-right-top &-arrow {
        .properties(top, 12);
    }

    &-rightBottom &-arrow,
    &-right-bottom &-arrow {
        bottom: 0;
    }
}